<template>
	<view class="register-container">


		<!-- 负责人姓名 -->
		<view class="form-item">
			<label>姓名</label>
			<input type="text" placeholder="输入负责人姓名" v-model="principalName" />
		</view>
		<!-- 身份证号码 -->
		<view class="form-item">
			<label>身份证号码</label>
			<input type="number" placeholder="输入负责人身份证号码" v-model="idCardNumber" />
		</view>
		<!-- 手机号 -->
		<view class="form-item">
			<label>手机号</label>
			<input type="number" placeholder="输入手机号" v-model="phoneNumber" />
		</view>

		<!-- 店名 -->
		<view class="form-item">
			<label>店名</label>
			<input type="text" placeholder="输入店名" v-model="storeName" />
		</view>
		<!-- 工商营业执照号码 -->
		<view class="form-item">
			<label>工商营业执照号码</label>
			<input type="text" placeholder="输入营业执照号" v-model="businessLicenseNumber" />
		</view>


		<!-- 经营区域 -->
		<view class="form-item">
			<label>经营区域</label>

			<!-- 			<picker mode="selector" :value="selectedAreaIndex" @change="handleAreaChange">
				<view class="picker-view">{{areaOptions[selectedAreaIndex]}}</view>
			</picker> -->
			<text>{{areaOptions}}</text>

		</view>



		<view class="form-item">
			<label>地址</label>
			<input type="text" placeholder="输入详细地址" v-model="address" />

		</view>

		<!-- 商家介绍 -->
		<view class="form-item">
			<textarea v-model="storeIntroduction" style="width: 100%;height: 260rpx;" placeholder="商家介绍"></textarea>
		</view>
		<!-- 身份证正反面照片上传 -->
		<view>
			<label style="font-weight: 700;">身份证正反面照片</label>
			<view class="upload-wrapper" @click="chooseImage('idCardImages')">
				<view class="upload-icon">+</view>
				<view class="upload-text">上传照片</view>
			</view>
		</view>
		<!-- 营业执照照片上传 -->
		<view>
			<label>营业执照</label>
			<view class="upload-wrapper" @click="chooseImage('businessLicenseImage')">
				<view class="upload-icon">+</view>
				<view class="upload-text">上传照片</view>
			</view>
		</view>
		<!-- 门面照片上传 -->
		<view>
			<label>门面照片</label>
			<view class="upload-wrapper" @click="chooseImage('storeFrontImage')">
				<view class="upload-icon">+</view>
				<view class="upload-text">上传照片</view>
			</view>
		</view>
		<!-- 修改按钮 -->
		<button class="register-button" @click="register">修改</button>


	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 负责人姓名
	const principalName = ref('');
	// 身份证号码
	const idCardNumber = ref('');
	// 手机号
	const phoneNumber = ref('');
	// 验证码
	const verificationCode = ref('');
	// 店名
	const storeName = ref('');
	// 工商营业执照号码
	const businessLicenseNumber = ref('');
	// 经营区域选项
	const areaOptions = ref("东史马小区菜鸟驿站");

	// 当前选择的经营区域索引
	const selectedAreaIndex = ref(0);
	// 地址
	const address = ref('');
	// 商家介绍
	const storeIntroduction = ref('');
	// 身份证正反面照片列表
	const idCardImages = ref([]);
	// 营业执照照片
	const businessLicenseImage = ref([]);
	// 门面照片
	const storeFrontImage = ref([]);

	// 获取验证码方法，此处仅为模拟，可替换为实际接口调用
	const getVerificationCode = () => {
		console.log('点击获取验证码');
	};

	// 经营区域选择变化处理方法
	const handleAreaChange = (e) => {
		selectedAreaIndex.value = e.target.value;
	};

	// 选择图片方法
	const chooseImage = (type) => {
		uni.chooseImage({
			count: type === 'idCardImages' ? 2 : 1,
			success: (res) => {
				if (type === 'idCardImages') {
					idCardImages.value = [...idCardImages.value, ...res.tempFilePaths];
				} else if (type === 'businessLicenseImage') {
					businessLicenseImage.value = res.tempFilePaths;
				} else if (type === 'storeFrontImage') {
					storeFrontImage.value = res.tempFilePaths;
				}
			}
		});
	};

	// 修改方法，此处仅为模拟，可替换为实际接口调用
	const register = () => {
		console.log('执行注册操作');
		uni.navigateTo({
			url: '/pages/index/merchantInfo/infoChange/infoChange'
		});
	};
</script>

<style scoped>
	.register-container {
		padding: 30rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		border-bottom: 1px solid #ccc;
		/* padding-bottom: 20rpx; */
		padding: 24rpx 10rpx;
	}

	.form-item label {
		/* display: block; */
		margin-bottom: 10rpx;
		font-weight: 500;
	}

	.verification-code {
		display: flex;
		width: 420rpx;
		justify-content: space-between;
		align-items: center;
		/* border: 2rpx solid #ccc; */
		box-sizing: border-box;
		border-radius: 10rpx;
	}



	.form-item input,
	.form-item textarea {
		width: 380rpx;
		height: 40rpx;
		padding: 15rpx;

		border-radius: 10rpx;
		/* box-sizing: border-box; */
	}

	.form-item textarea {
		border: 1px solid #ccc;
	}

	.verification-code input {
		width: 200rpx;
		border: none;
	}

	.form-item button {
		height: 60rpx;
		border-radius: 10rpx;
		background-color: #fff;
		color: #007AFF;
		padding: 0 20rpx;
		/* box-sizing: border-box; */
	}

	.verification-code .aa {
		color: #1D6FFF;
		padding-right: 10rpx;
	}

	.picker-view {
		width: 380rpx;
		padding: 15rpx;
		/* border: 1px solid #ccc; */
		border-radius: 10rpx;
	}

	.upload-wrapper {
		width: 200rpx;
		height: 200rpx;
		border: 1px dashed #ccc;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}

	.upload-icon {
		font-size: 80rpx;
		color: #ccc;
	}

	.upload-text {
		color: #ccc;
		font-size: 32rpx;
	}

	.register-button {
		width: 100%;
		height: 80rpx;
		background-color: #007AFF;
		color: #fff;
		border: none;
		border-radius: 10rpx;
		font-size: 36rpx;
	}
</style>